<template>
  <div>
    <div class="container">
      <div>
        <el-form :inline="true" :model="content" class="demo-form-inline">
          <el-form-item label="标题">
            <el-input
              v-model="content.TitleName"
              placeholder="请输入标题"
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
      <div class="mgb20" ref="editor"></div>
    </div>
    <el-button type="primary" @click="syncHTML">保存</el-button>
    <el-button type="primary" @click="Route">返回</el-button>
  </div>
</template>

<script>
import WangEditor from "wangEditor";
import { ref, reactive, onMounted, onBeforeUnmount } from "vue";
import { useRouter } from "vue-router";
import { GetSiganalrAdd } from "../../api/Inform";
export default {
  name: "editor",
  setup() {
    const editor = ref(null);
    const content = reactive({
      TitleName: "",
      Content: "",
    });
    //定义实例
    let instance;
    //安装在instance
    onMounted(() => {
      instance = new WangEditor(editor.value);
      instance.config.zIndex = 1;
      instance.create();
    });
    onBeforeUnmount(() => {
      instance.destroy();
      instance = null;
    });
    //保存按钮
    const syncHTML = () => {
      content.Content = instance.txt.html();
      console.log(content.Content);
      GetSiganalrAdd(content).then((res) => {
        console.log(res);
      });
    };
    //跳转
    const router = useRouter();
    //点击排产Scheduling跳转
    const Route = () => {
      router.push({ path: "/informlist" });
    };
    return {
      content,
      syncHTML,
      editor,
      Route,
    };
  },
};
</script>

<style>
</style>